<template>
	<div style="padding:15rpx;">
		<div style="display:flex; justify-content:space-around; margin-bottom:30rpx;">
			<div @tap="filterOrder(0)" :class="{ actived: orderType === 0 }">全部</div>
			<div @tap="filterOrder(1)" :class="{ actived: orderType === 1 }">待付款</div>
			<div @tap="filterOrder(2)" :class="{ actived: orderType === 2 }">待收货</div>
			<div @tap="filterOrder(3)" :class="{ actived: orderType === 3 }">退款</div>
		</div>
		<div v-if="allOrders == null || allOrders.length == 0" style="text-align:center; color:gray">
			<image src="@/static/img/loading.gif" style="width:370rpx; height:250rpx;" mode=""></image>
			<view>订单表空空如也，快去下单吧</view>
		</div>
		<div v-else>
			<div v-for="(order, index) in orderList" :key="index"
				style="padding: 10rpx 20rpx;margin-bottom: 20rpx;box-shadow: 0 0 10rpx #d4d4d4;">
				<div style="display:flex; justify-content:space-between; line-height:70rpx;">
					<div style="font-size:80%; color:gray;">{{ $dateUtil.fmtDate(order.createTime) }}</div>
					<div :style="{ color: statusColorMap[order.orderStatus] }">{{ statusCNMap[order.orderStatus] }}
					</div>
				</div>
				<!-- 订单商品列表 -->
				<div v-for="(goods, goodsIndex) in order.goodsList" :key="goodsIndex"
					style="display: flex; font-size: 30rpx; ">
					<image :src="goods.image" style="margin: 10rpx ; width: 120rpx; height: 120rpx;" mode=""></image>
					<div style="width: 550rpx;">
						<div style="display: flex; justify-content:space-between;">
							<div style=" width: 400rpx; white-space: nowrap; overflow: hidden;">{{ goods.name }}</div>
							<div style="">￥{{ goods.price / 100 }}</div>
						</div>
						<div style="display: flex; justify-content:space-between;">
							<div style=" width:400rpx;white-space:nowrap;overflow:hidden;color:gray">
								{{ goods.propertyStr }}</div>
							<div>x{{ goods.count }}</div>
						</div>
						<div style="color:red" v-if="goods.refundNo">已退款</div>
					</div>
				</div>
				<!-- 总金额-操作订单 -->
				<div style="display:flex; justify-content:space-between; ">
					<div v-if="order.orderStatus === statusMap.NotPay">待支付￥{{ order.totalPrice / 100 }}</div>
					<div v-else>实付￥{{ order.payPrice / 100 }}</div>

					<div style="display:flex; justify-content:flex-end;">
						<div v-if="order.orderStatus === statusMap.NotPay" @tap="calcelOrder(order.orderNo)"
							class="btn">取消</div>
						<div v-if="order.orderStatus === statusMap.NotPay" @tap="orderPay(order.orderNo)" class="btn">支付
						</div>
						<div v-if="order.orderStatus === statusMap.WaitTake" @tap="confirmReceive(order.orderNo)"
							class="btn">确认收货</div>
						<div class="btn" @tap="showOrderDetail(order)">详情</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 订单详情 -->
		<div v-if="flagShowOrderDetail" class="mask" @tap="flagShowOrderDetail = false"></div>
		<div v-if="flagShowOrderDetail" class="orderDetail" @tap="flagShowOrderDetail = false">
			<div>订单号：{{ curOrder.orderNo }}</div>
			<div>
				商品列表：
				<div v-for="(goods, index) in curOrder.goodsList" :key="index"
					style="font-size:30rpx;line-height:35rpx;padding:5rpx 30rpx;">
					<div>{{ goods.name }} {{ goods.propertyStr ? "["+goods.propertyStr+"]" : '' }}</div>
					<div>价格￥{{ goods.price }} 数量{{ goods.count }}</div>
					<div style="color:red" v-if="goods.refundNo">退款号：{{ goods.refundNo }}（已退款）</div>
					<div v-if="goods.refundReason">退款原因：{{ goods.refundReason }}</div>
				</div>
			</div>
			<div>订单总额：￥{{ curOrder.totalPrice / 100 }}</div>
			<div v-if="curOrder.payPrice!=null">实际支付：￥{{ curOrder.payPrice / 100 }}</div>
			<div v-if="curOrder.payPrice!=null">微信交易号：{{ curOrder.wxPayTransactionId }}</div>
			<div>下单时间：{{ $dateUtil.fmtDate(curOrder.createTime) }}</div>
			<div v-if="curOrder.payTime">支付时间：{{ $dateUtil.fmtDate(curOrder.payTime) }}</div>
			<div v-if="curOrder.extraInfo">订单备注：{{ curOrder.extraInfo }}</div>
		</div>
	</div>
</template>

<script>
	import * as orderApi from '@/api/orderApi.js';
	import * as payApi from '@/api/payApi.js';
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				userInfo: {},
				orderType: 0, // 显示的订单类型
				statusMap: {},
				statusCNMap: {
					1: '未支付',
					2: '待发货',
					5: '待收货',
					10: '已完成',
					11: '退款中',
					12: '已退款'
				},
				statusColorMap: {
					1: 'black',
					2: 'orange',
					5: 'orange',
					10: 'green',
					11: 'red',
					12: 'red'
				},
				flagShowOrderDetail: false, // 显示订单详情弹窗
				curOrder: {}, // 订单
				allOrders: [], // 所有订单
				orderList: [], // 显示的订单列表
				timer: null,
			};
		},
		onShow() {
			this.statusMap = this.$config.orderStatus;
			
			this.userInfo = uni.getStorageSync("userInfo")
			this.getOrderList() // 定时拉取订单列表
			this.timer = setInterval(() => {
				this.userInfo = uni.getStorageSync("userInfo")
				this.getOrderList() // 定时拉取订单列表
			}, 1000 * 30)
		},
		onHide() {
			console.log("clearInterval: timer-getOrderList")
			clearInterval(this.timer)
		},
		// 微信小程序分享功能
		onShareAppMessage() {
			return {
				title: '商品列表',
				path: '/pages/goods/goodsList'
			}
		},
		methods: {
			getOrderList() {
				if (!(this.userInfo && this.userInfo.id > 0)) return;
				orderApi.getOrderList({
					showLoading: false,
					success: res => {
						this.allOrders = res.data;
						// 订单商品的属性：
						for (let i = 0; i < this.allOrders.length; i++) {
							this.allOrders[i].goodsList.forEach(goods => {
								let str = '';
								for (let k in goods.propertyMap) {
									if (str.length > 0) str += ',';
									str += goods.propertyMap[k];
								}
								goods.propertyStr = str;
							});
						}
						this.filterOrder(this.orderType);
					},
				});
			},
			// 表单分类: 0：全部，1：待付款，2；待收货，3：退款
			filterOrder(type) {
				this.orderType = type;
				this.orderList = this.allOrders.filter(order => {
					if (type === 0) {
						return true;
					} else if (type === 1) {
						return order.orderStatus === this.statusMap.NotPay;
					} else if (type === 2) {
						return order.orderStatus === this.statusMap.WaitTake;
					} else if (type === 3) {
						return order.orderStatus === this.statusMap.Refunding || order.orderStatus === this
							.statusMap.Refunded || order.refundCount > 0;
					}
					return false;
				});
			},
			// 显示订单详情页
			showOrderDetail(order) {
				this.curOrder = order;
				this.flagShowOrderDetail = true;
			},
			// 取消并删除订单
			calcelOrder(orderNo) {
				orderApi.cancelOrder({
					orderNo: orderNo,
					success: () => {
						this.$msg('取消成功，已删除订单');
						this.getOrderList();
					}
				});
			},
			// 支付订单
			orderPay(orderNo) {
				uni.navigateTo({
					url: '/pages/order/pay?orderNo=' + orderNo
				});
			},
			// 确认收货
			confirmReceive(orderNo) {
				orderApi.confirmReceive({
					orderNo: orderNo,
					success: () => {
						this.getOrderList();
					}
				})
			}
		}
	};
</script>

<style>
	.actived {
		color: blue;
	}

	.btn {
		border: 1px solid #dedede;
		padding: 5rpx 10rpx;
		margin: 5rpx;
	}

	.btn:active {
		font-weight: bold;
	}

	/* 订单详情弹窗 */
	.orderDetail {
		position: fixed;
		top: 15vh;
		left: 3%;
		width: 90%;
		max-height: 70vh;
		overflow-y: scroll;
		z-index: 1000;
		background-color: white;
		padding: 2%;
		line-height: 50rpx;
		color: #5a5a5a;
	}

	/* 弹窗遮罩 */
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 90;
		background-color: black;
		opacity: 0.4;
	}
</style>
